<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
    <style type="text/css">
        #panel {
            position: absolute;
            max-height: 90%;
            height:300px;
            overflow-y: auto;
            top: 50px;
            right: 10px;
            width: 180px;

        }
         .amap_lib_placeSearch .poibox .poi-title{
         font-size:12px;
        }
        .amap_lib_placeSearch .poibox .poi-info p{
        font-size:10px;
        }

        #search {
         position: absolute;
            background-color: transparent;
            max-height: 90%;
            overflow-y: auto;
            top: 20px;
            right: 10px;
            width: 180px;

        }
        #search_input{
         width:120px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search">
    <input id="search_input" type="text" placeholder="搜索地址">
    <input id="search_sub" type="submit" value="搜索" onclick="search()">
</div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "210560c7b915b95686d9baa8b12d5a83",
    };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">


    var map
    AMapLoader.load({
      key: "d7b81d72864f222e583d2283493cdd58", //申请好的Web端开发者 Key，调用 load 时必填
      version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
      .then((AMap) => {
         map = new AMap.Map("container",{
          zoom:10,
          center: [118.832028,31.875796], //地图中心点
         });
        //异步加载控件
        AMap.plugin('AMap.ToolBar',function(){
          var toolbar = new AMap.ToolBar(); //缩放工具条实例化
          map.addControl(toolbar); //添加控件
        });
        //异步加载控件
        AMap.plugin('AMap.Scale',function(){
          var scale = new AMap.Scale()
          map.addControl(scale); //添加控件
        });

      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });
    function search()
    {
   // 获取输入框元素
    var inputElement = document.getElementById('search_input');
    // 获取输入框中的文本内容
    var searchText = inputElement.value;
    console.log(searchText);  // 在控制台输出文本内容
    searchplace(searchText)
    }
    function searchplace(addr){
     AMap.plugin(["AMap.PlaceSearch"], function () {
          const placeSearch = new AMap.PlaceSearch({
            pageSize: 5, //单页显示结果条数
            pageIndex: 1, //页码
<!--            city: "江苏", //兴趣点城市-->
<!--            citylimit: true, //是否强制限制在设置的城市内搜索-->
            selectFirst:true,
            map: map, //展现结果的地图实例
            panel: "panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
            autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
          });
            placeSearch.on('selectChanged', function(e) {
                console.log(JSON.stringify(e.selected.data))
                postStringToApp(JSON.stringify(e.selected.data))
            });
          placeSearch.search(addr);

        });
    }
    //-------------------地图展示很poi检索js代码----------------------------------

//--------------------------------与arkts通信代码--------------------------
var h5Port;
window.addEventListener('message', function(event) {
    if (event.data == 'initport') {
        if(event.ports[0] != null) {
            h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
            h5Port.onmessage = function(event) {
                // 2. 接收ets侧发送过来的消息.
                var result = event.data;
                console.log('arkts发来的消息： '+result)
            }
            h5Port.onmessageerror = (event) => {
                console.error(`发送了错误信息: ${event}`);
            };
        }
    }
})

// 使用h5Port往ets侧发送String类型的消息.
function postStringToApp(str) {
    if (h5Port) {
        h5Port.postMessage(str);
    } else {
        console.error("In html h5port is null, please init first");
    }
}


</script>
</body>
</html>